<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">   
    <meta name="viewport"        
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>话费充值</title>
    <!-- <link rel="stylesheet" href="../public/css/1.css"> -->
    <link rel="stylesheet" href="../public/css/1.css">
    <link rel="stylesheet" href="../public/css/reset.css" />
    <link rel="stylesheet" href="../public/css/all_use.css" />
    <link rel="stylesheet" href="../public/css/footer.css">
    <script src="../public/js/utils/utils.js"></script>
    <!-- <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
    <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
</head>
<style>
</style>

<body>
    <div id="app">
        <div class="bianbox">
            <div :class="[choose==1 ? 'quank' : 'dquank']" @click="handle(1)">移动</div>
            <div :class="[choose==2 ? 'quank' : 'dquank']" @click="handle(2)">联通</div>
            <div :class="[choose==3 ? 'quank' : 'dquank']" @click="handle(3)">电信</div>
        </div>
        <div class="input">
            <input placeholder="请输入手机号码"  style="width: 90%;height: 40px;border-radius: 5px;border-width: 1px"
                maxlength="11" v-model="text">
            <img src="../public/img/tx.png" style="margin-left:-9%;margin-top: 3%;" width="25px" height="25px">
        </div>
        <div v-for="(item,i) in dataList">
            <div class="xqk">
                <div class="g"></div>
                <div class="hd">{{item.classify}}</div>
                <div class="xq" @click="findDetails(item.id)">详情</div>
            </div>
            <div class="c">
                <div class="k" v-for="(ite,i) in item.payList" @click="addOrder(ite.id,ite.label,ite.payMoney,item.id)">
                    <div class="mc">{{ite.label}}</div>
                    <div class="cc">{{ite.credit}}元</div>
                    <div class="ss">售价:￥{{ite.payMoney}}</div>
                </div>
            </div>
        </div>
        <div class="xl">
            <div class="footer_cell" onclick="router('/app/index.html')">
                <img :src="inde==0?'../public/img/cz.png':'../public/img/cz.png'">
                <p>话费充值</p>
            </div>
            <div class="footer_cell" onclick="router('/app/shangcheng.html')">
                <img :src="inde==1?'../public/img/ll.png':'../public/img/ll.png'">
                <p>流量充值</p>
            </div>
            <div class="footer_cell" onclick="router('/app/store.html')">
                <img :src="inde==1?'../public/img/sc.png':'../public/img/sc.png'">
                <p>商城</p>
            </div>
            <div class="footer_cell" onclick="router('/app/ykcz.html')">
                <img :src="inde==2?'../public/img/jl.png':'../public/img/jl.png'">
                <p>油卡充值</p>
            </div>
            <div class="footer_cell" onclick="router('/app/wode.html')">
                <img :src="inde==3?'../public/img/gr.png':'../public/img/gr.png'">
                <p>个人中心</p>
            </div>
        </div>

        <van-dialog v-model="show" title="确认订单信息" show-cancel-button="true" confirm-button-text="确认下单"
            confirm-button-color="#11BD10" @confirm="zf">
            <div class="czh">
                <div class="czhm">充值号码</div>
                <div class="dhh">{{text}}</div>
            </div>
            <div class="czh">
                <div class="czhm">套餐</div>
                <div class="tc1">{{label}}</div>
            </div>
            <div class="czh">
                <div class="czhm">售价</div>
                <div class="sj1">{{payMoney}}</div>
            </div>
            <div class="czh">
                <div class="czhm">{{details}}</div>
            </div>
        </van-dialog>
        <van-dialog v-model="showq" title="产品详情" confirm-button-text="我知道了" confirm-button-color="black">
            <div class="czh">
                <div class="czhm">{{details}}</div>
            </div>
        </van-dialog>
    </div>

</body>
<script type="module">
    import ajax from "../public/js/api/api.js";
    import telJudge from "../public/js/utils/telJudge.js";
    var app = new Vue({
        el: '#app',
        data: {
            showq: false,
            show: false,
            message: [],
            inde: 0,
            text: '',
            choose: 1,
            flag: '',
            dataList: [],
            label: '',
            details: '',
            payMoney: '',
            account: {},
            typelist: [],
            id: "",//商品id
        },
        watch:{
            text:function (val){
                if(val.length==11){
                    this.choose = telJudge(val);
                }
            },
            choose:function(id){
                if (id == 2) {
                    this.findByParticulars()
                } else if (id == 3) {
                    this.findByParticulars()
                } else {
                    this.findByParticulars()
                }
            }
        },
        created() {
            this.fun9();
            this.findByIsType();
            this.findByParticulars();
            this.openid = this.GetRequest().openid;
            this.findAccountById(this.GetRequest().openid)
        },
        methods: {

            handle(id) {
                this.choose = id
                if (id == 2) {
                    this.findByParticulars()
                } else if (id == 3) {
                    this.findByParticulars()
                } else {
                    this.findByParticulars()
                }
            },
            findDetails(detailsId) {
                this.showq = true
                ajax
                    .findDetails({
                        id: detailsId
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.details = res.data.data.details
                        }
                    })
            },
            addOrder(id, label, payMoney, detailsId) {
                this.id = id
                this.show = true
                this.label = label
                this.payMoney = payMoney
                ajax
                    .findDetails({
                        id: detailsId
                    })
                    .then((res) => {
                        if (res.data.code == 0) {
                            this.details = res.data.data.details
                            // console.log(this.details);
                        }
                    })
            },
            findByParticulars: function () {
                ajax
                    .findByParticulars({
                        flag: this.choose,
                        isType: 0
                    })
                    .then((res) => {
                        console.log(res.data.data,"-----888---");
                        if (res.data.code == 0) {
                            this.dataList = res.data.data
                        }
                    })
            },
            findByIsType: function () {
                ajax
                    .findByIsType({
                        isType: this.typelist.isType
                    })
                    .then((res) => {
                        // console.log(res.data.data,"--------");
                        if (res.data.code == 0) {
                            this.typelist = res.data.data
                        }
                    })
            },

            findAccountById: function (openid) {
                if (openid !== undefined) {
                    // console.log(888);
                    ajax
                        .findAccountById({
                            openId: openid
                        })
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.account = res.data.data;
                            }
                        })
                } else {
                    ajax
                        .findAccount2({})
                        .then((res) => {
                            if (res.data.code == 0) {
                                this.account = res.data.data;
                            }
                        })
                }
            },
            // 获取路径后携带的参数
            GetRequest() {
                var url = location.search; //获取url中"?"符后的字串
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = unescape(
                            strs[i].split("=")[1]
                        );
                    }
                }
                return theRequest;
            },
            fun9: function () {
                ajax
                    .zhifu({
                        url: window.location.href.split("#")[0],
                    })
                    .then((res) => {
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                            nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
                            signature: res.data.data.signature, // 必填，签名
                            jsApiList: ["chooseWXPay", 'updateTimelineShareData', 'updateAppMessageShareData'], // 必填，需要使用的JS接口列表
                        });
                    });
            },
            paySuccess:function(){
                ajax.paySuccess().then((res)=>{
                    console.log(res)
                });
            },
            zf: function () {
                var that = this
                // console.log(123);
                if (this.text == "") {
                    alert("请输入手机号")
                    return;
                }
                //支付
                ajax.getPay({
                    id: this.id,
                    flag: this.choose,
                    phone: this.text,
                    openId: this.account.openId,
                    nickname: this.account.nickname,
                    avatar: this.account.head,
                    accountId: this.account.id,
                    type: 1
                }).then(
                    (res) => {
                        // console.log(res, "=====---=====");
                        WeixinJSBridge.invoke(
                            'getBrandWCPayRequest', {
                            "appId": res.data.data.appId,     //公众号ID，由商户传入
                            "timeStamp": res.data.data.timeStamp,         //时间戳，自1970年以来的秒数
                            "nonceStr": res.data.data.nonceStr, //随机串
                            "package": res.data.data.package,
                            "signType": res.data.data.signType,         //微信签名方式：
                            "paySign": res.data.data.paySign //微信签名
                        },
                            function (res) {
                                console.log(88);
                                if (res.err_msg === "get_brand_wcpay_request:ok") {
                                    // console.log("支付成功")
                                    //抽取卡片
                                    // that.sex = sex
                                    // that.start()
                                    setTimeout(() => {
                                        that.paySuccess()
                                    }, 100)
                                    setTimeout(() => {
                                        // that.getCard(sex);
                                        // that.sex = null;
                                        // that.rotate = false;
                                    }, 4800)
                                }
                            }
                        );
                    },
                )
            },


        }
    })
</script>

</html>